<template>
	<!--POP画册、POP下单、道具下单-->
	<view class="page-content">
		<view class="page-top">
			<!-- 标题栏和状态栏占位符 -->
			<view class="titleNview-placing"></view>
			<!-- 标题+筛选 -->
			<w-sel-search topType="two" :col_num="4" label_height="52" :pageobj="pageobj" popHeight="320"
				leftIcon="arrowleft" :cenTit="page_title" cenType="title" iconfont="28"
				:is_back="false" @back="back" @resetFilterData="resetFilterData" @setFilterData="setFilterData">
			</w-sel-search>
		</view>
		<scroll-view class="page-body" :scroll-top="scrollTop" scroll-y="true" @scrolltolower="loadmore()">
			<!--动态-->
			<template v-if="objlist && objlist.length > 0 ">
				<view class="body-box">
					
					<block v-for="(item,index) in objlist" :key="index">
						<view class="body-box-li" @click="selnum(index)">
							<product-num-edit :obj="item" pageType="prop"
							@rednum2="rednum2"
							@addnum2="addnum2"
							></product-num-edit>
						</view>
					</block>

				</view>
				<view class="btn-box">
					<view class="submit" @tap="confirm()">下一步</view>
				</view>
				<!-- 上拉加载 -->
				<view class="det-con-more">
					<load-more :loadmore="load_more1"></load-more>
				</view>
			</template>
			<!--无数据-->
			<empty v-else no-full type="noData"></empty>
		</scroll-view>
	</view>
</template>

<script>
	import wSelSearch from '@/components/w-sel-logo/w-sel-search.vue'; //标题
	import loadMore from '@/components/uni-load-more/load-more.vue';
	import productNumEdit from '@/pages/components/product_num_edit.vue';
	export default {
		components: {
			loadMore,
			productNumEdit,
			wSelSearch
		},
		data() {
			return {
				scrollTop: 0,
				noData: false,
				load_more1: '', //下拉加载文字
				load_sta: false, //是否是加载状态
				page_title: '',
				pageobj: {
					name: '单选',
					type: 'radio',
					submenu: [{
							submenu: [{
									name: "橱窗",
									value: "1"
								},
								{
									name: "VP",
									value: "2"
								}, {
									name: "服装墙",
									value: "3"
								},
								{
									name: "展桌",
									value: "4"
								},
								{
									name: "橱窗",
									value: "5"
								},
								{
									name: "VP",
									value: "6"
								}, {
									name: "服装墙",
									value: "7"
								},
								{
									name: "展桌",
									value: "8"
								}
							]
						}
					]
				},
				objlist:[
						{
							pro_img: '/static/data-img/img.jpg',
							pro_name: 'XX系列图片系列图片系列图片',
							pro_txt: ['男', '鞋', '都市'],
							remark: '此订单需注意尺寸',
							datalist:[{
								pro_name:'易拉宝',
								texture:['塑料','玻璃','棉'],
								list:[{
									is_edit:1,
									name:'1米版',
									type:2,
									sizew:'',
									sizeh:'',
									num:0
								},{
									is_edit:2,
									name:'2米版',
									type:2,
									sizew:'500',
									sizeh:'370',
									num:0
								},{
									is_edit:2,
									name:'3米版',
									type:2,
									sizew:'500',
									sizeh:'370',
									num:0
								}]
							},{
								pro_name:'画册',
								texture:['塑料','玻璃','棉'],
								list:[{
									is_edit:1,
									name:'285mmx285mm',
									type:2,
									sizew:'',
									sizeh:'',
									num:0
								},{
									is_edit:2,
									name:'285mmx210mm',
									type:2,
									sizew:'500',
									sizeh:'370',
									num:0
								},{
									is_edit:2,
									name:'250mmx250mm',
									type:2,
									sizew:'500',
									sizeh:'370',
									num:0
								}]
							}]
						}
					],
				sel_index:0, //选择当前项
			}
		},
		computed: {
			
		},
		onShow() {
			
		},
		onLoad(option) {
			console.log(222, option)
			if (!!option.title) {
				this.page_title = option.title;
			}
		},
		methods: {

			//筛选项
			selnum(index){
				console.log(12,index)
				this.sel_index = index;
			},
			rednum2(index,index2){
				if(this.objlist && this.objlist.length>0){
					this.objlist.forEach((item,i) =>{
						if(this.sel_index === i){
							if(item.datalist && item.datalist.length>0){
								item.datalist.forEach((item2,ii) =>{
									if(index===ii){
										if(item2.list && item2.list.length>0){
											item2.list.forEach((item3,iii) =>{
												if(index2===iii){
													if(item3.num>0){
														item3.num -= 1
													}
												}
											})
										}
									}
								})
							}
						}
					})
				}
			},
			addnum2(index,index2){
				if(this.objlist && this.objlist.length>0){
					this.objlist.forEach((item,i) =>{
						if(this.sel_index === i){
							if(item.datalist && item.datalist.length>0){
								item.datalist.forEach((item2,ii) =>{
									if(index===ii){
										if(item2.list && item2.list.length>0){
											item2.list.forEach((item3,iii) =>{
												if(index2===iii){
													item3.num += 1
												}
											})
										}
									}
								})
							}
						}
					})
				}
			},
			//下一步
			confirm() {
				uni.navigateTo({
					url:'/pages/order/PropConfirmOrder'
				})
			},
			//返回
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			//重置筛选
			resetFilterData() {

			},
			//确认筛选
			setFilterData() {

			},
			loadmore() {

			},
		}
	}
</script>

<style lang="scss">
	.titleNview-placing {
		height: var(--status-bar-height);
		box-sizing: content-box;
		background: $uni-bg-color;
		display: block;
		position: sticky;
		top: 0rpx;
		z-index: 9999;
		overflow: hidden
	}

	.page-content {
		width: 100vw;
		height: 100%;

		.page-top {
			display: flex;
			flex-direction: column;
			box-sizing: content-box;
			background: $uni-bg-color;
			display: block;
			position: sticky;
			top: 0rpx;
			z-index: 9999;
			border-bottom: 1rpx solid #f5f5f5;
		}

		.page-body {
			display: flex;
			height: calc(100% - 180rpx - var(--status-bar-height));
			padding: 0;

			.btn-box {
				width: 100%;
				position: fixed;
				left: 0;
				right: 0;
				bottom: 0;
				height: 90rpx;
				display: flex;
				flex-shrink: 0;
				flex-direction: row !important;
				align-items: center;
				font-size: 28rpx;
				font-weight: bold;
				line-height: 90rpx;
				color: $font-color-w;

				.submit {
					text-align: center;
					flex: 2;
					background-color: #198FFF;
				}
			}


			.body-box {
				display: flex;
				flex-direction: column;
				background: $uni-bg-color;
				margin-bottom: 20rpx;

			}
		}
	}
</style>
